<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-10 18:28:38
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-04-11 10:54:14
 * @FilePath: \ant-design-vue-jeecg-master\src\views\situationDisplay\modules\SXZY.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="windowInfo">
      <h3>资源状态显示</h3>
      <div class="windowInfo-body">
        <div class="ZY-box">
          <h3>时隙资源使用情况</h3>
          <div class="tableContainer">
            <div
              class="tableItem"
              :class="item.status == 2 ? 'employ' : 'empty'"
              :key="index + 'timeSolt'"
              v-for="(item, index) in statusList"
            >
              <!-- {{ item.status == 0 || item.status == 1 ? '空' : '' }} -->
            </div>
          </div>
        </div>
        <div class="ZY-box">
          <h3>信道资源使用情况</h3>
          <div class="tableContainer">
            <div
              class="tableItem1"
              :class="item.status == 2 ? 'employ' : 'empty'"
              :key="index + 'PDSolt'"
              v-for="(item, index) in statusList1"
            >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      statusList: [
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 1 },
        { status: 1 },
      ],
      statusList1: [
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 1 },
        { status: 1 },
        { status: 1 },
      ],
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      for (let i = 0; i < 519; i++) {
        this.statusList1.push({ status: 0 })
      }
    },
  },
}
</script>

<style lang="less" scoped>
.tableContainer {
  width: 202px;
  display: flex;
  border: solid 0.1px rgb(87, 217, 249);
  flex-wrap: wrap;
  margin: 0 auto;
  .tableItem {
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    border: solid 0.1px rgb(87, 217, 249);
  }
  .tableItem1 {
    width: 8px;
    height: 8px;
    text-align: center;
    line-height: 8px;
    border: solid 0.1px rgb(87, 217, 249);
  }
}
.employ {
  background-size: 50px 50px;
  background-color: #7bf35d;
  background-image: -webkit-linear-gradient(
    -45deg,
    rgba(133, 201, 56, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(139, 248, 96, 0.2) 50%,
    rgba(116, 115, 115, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-image: linear-gradient(
    -45deg,
    rgba(107, 106, 106, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(134, 132, 132, 0.2) 50%,
    rgba(117, 116, 116, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
.windowInfo {
  h3 {
    color: rgb(87, 217, 249);
  }
  color: #fff;
  padding: 10px;
  background: rgba(30, 36, 50, 0.6) !important;
}
.empty {
  background-size: 50px 50px;
  background-color: rgb(68, 69, 70);
  background-image: -webkit-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(116, 115, 115, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-image: linear-gradient(
    -45deg,
    rgba(107, 106, 106, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(134, 132, 132, 0.2) 50%,
    rgba(117, 116, 116, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
/* 四角边框--start */
.windowInfo {
  position: relative;
  // width: 300px;
  // /* height: 300px; */
  // margin: 300px auto;
  // /* background: rgba(1, 19, 67, 0.8); */

  border: 2px solid #58d0f3 !important;
  z-index: 1;
  .windowInfo-body {
    display: flex;
  }
  .ZY-box {
    padding: 15px;
  }
}

.windowInfo::before {
  position: absolute;
  content: '';
  top: -2px;
  bottom: -2px;
  left: 30px;
  width: calc(100% - 60px);
  /* border-top: 2px solid #016886; */
  /* border-bottom: 2px solid #016886; */
  border-bottom: 2px solid #4f78ae;
  border-top: 2px solid #4f78ae;
  z-index: -1;
}
.windowInfo::after {
  position: absolute;
  content: '';
  top: 30px;
  right: -2px;
  left: -2px;
  height: calc(100% - 60px);
  border-right: 2px solid #4f78ae;
  border-left: 2px solid #4f78ae;
  z-index: -1;
}

/* 四角边框--end */
</style>
